<template>
  <div class="employees">
    <!-- <HmTip>
      <template #left> 本月：社保 </template>
      <template #right> <el-button>设置</el-button> </template>
    </HmTip> -->
    <el-card class="top">
      <HmTip>
        <template #right>
          <!--
            需求：
               1:点击导入跳转到一个新的上传excel页面
                  a：创建新页面所对应组件
                  b:配制路由
                  c:完成新页面的布局
               2：点击上传选择excel读取excel文件数据并调用接口实现批量员工新增
               3：新增成功跳转到员工页面

           -->
          <el-button
            type="primary"
            size="small"
            @click="outputClick"
          >导出</el-button>
          <el-button
            type="primary"
            size="small"
            @click="importClick"
          >导入</el-button>
          <el-button
            type="primary"
            size="small"
            @click="addClick"
          >+新增员工</el-button>
        </template>
      </HmTip>
    </el-card>
    <el-card>
      <!-- 查
      1：定义api
      2:导入
      3：进入页面调用
      4：数据存储并渲染
      5：和分页建立联系
          a:调用时传入分页数据
          b:接口调用成功修改total数据总条数
          c:页码改变与页容量改变都要调用接口
        增
        1:创建一个dialog弹框组件
        2：在父级使用
        3：点击新增打开弹框
        4:完成表单处理，布局，表单验证，内部数据处理
        5:定义新增api
        6:导入
        7：点击确定在验证成功后调用
        8：调用成功
          a:提示
          b:清空表单数据与验证
          c:刷新父级列表数据
          d:关闭弹框组件
        删除
        1:绑定删除按钮事件
        2:删除按钮事件触发时弹一个确定框
        3:定义删除api
        4:导入删除api
        5:点击确定后调用删除api
        6:调用成功后
          a:提示一下
          b:刷新列表数据

       -->
      <el-table :data="list">
        <el-table-column label="序号" width="70px">
          <template v-slot="{ $index }">
            <div>
              {{ (page.page - 1) * page.size + $index + 1 }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="头像" prop="staffPhoto" width="80px">
          <template v-slot="{ row }">
            <img
              v-imgerror
              class="avatar"
              :src="row.staffPhoto"
              alt=""
              @click="imgClick(row.staffPhoto)"
            >
            <!--
              需求:点击头像生成头像的二维码
              1:创建一个dialog弹框组件
              2:点击图片打开dialog弹框
              3:在弹框组件中生成二维码
             -->
          </template>
        </el-table-column>
        <el-table-column label="姓名" prop="username" />
        <el-table-column label="手机号" prop="mobile" />
        <el-table-column label="工号" prop="workNumber" />

        <!--           将聘用形势的值进行转换
            过滤器：filter,字符转换
           定义：  filters:{
                  方法名(参数，参数2){
                    return 值
                  }

             }
            使用：  {{ 实参值 | 方法名(参数2实参值)}}  v-bind
            注意点：它不能使用this.只能用于{{}}和v-bind

            1:将枚举数据导入
            2：定义过滤器
            3：写好转换规则
            4:使用过滤器

            过滤器：只是用于字符转换，只能用于{{}} v-bind  不能使用this
            计算属性：依赖一个或者多个值（响应式数据）产生一个新的值，特点：它产生的值会缓存，它可当属性使用
            侦听器：某个值(响应式数据)的change事件侦听到某个值变化后执行相应代码 -->
        <!-- <el-table-column label="聘用形势" prop="formOfEmployment">
          <template v-slot="{ row }">
            <div>
              {{ row.formOfEmployment | formatStr }}
            </div>
          </template>
        </el-table-column> -->
        <!--
          借助elementui提供的组件方法进行转换

          使用el-table-column内自带的属性进行转换 formatter(row:当前行数据,column:当前栏,cellValue:当前项的值,index:索引){return 值}

        -->
        <!-- <el-table-column
          label="聘用形势"
          prop="formOfEmployment"
          :formatter="formatterForm"
        /> -->
        <!-- 定义指令转换
        定义一个自定义指令进行数据转换，修改自定义指令所在dom的内部内容
        v-指令名=“当前项的值”
        修改它所在dom的内部内容

        -->
        <!-- <el-table-column label="聘用形势" prop="formOfEmployment">
          <template v-slot="{ row }">
            <div v-directiveForm="row.formOfEmployment">
              {{ row.formOfEmployment }}
            </div>
          </template>
        </el-table-column> -->
        <el-table-column label="聘用形势" prop="formOfEmployment2" />
        <el-table-column label="部门" prop="departmentName" />
        <el-table-column label="入职时间" prop="timeOfEntry2" />
        <el-table-column label="是否在职" prop="enableState2" />
        <el-table-column label="操作" width="300px" fixed="right">
          <template v-slot="{ row }">
            <!-- $index:当前行数据的索引  row:当前行数据 -->
            <div>
              <!--
                需求:点击查看跳转到一个新的页面,展示当前查看员工的详情
                1:创建一个员工详情的组件
                2:配制路由
                3:点击跳转,做一个路由传参传入点击员工的id到员工详情组件页面
                  路由传参:
                     1:基本传参.类似于get请求,直接url拼接
                     2:动态路由匹配  ,
                        a:配制路由
                        b:传入
                        c:接收
                     3:name传参
                        a:配制路由的name
                        b:传(params,query)
                        c:接收

               -->
              <el-button type="text" @click="look(row.id)">查看</el-button>
              <el-button type="text">转正</el-button>
              <el-button type="text">调岗</el-button>
              <el-button type="text">离职</el-button>
              <!--
                 1:点击打开弹框
                    a:创建一个弹框组件
                    b:在页面使用该组件
                    c:点击角色按钮打开弹框，通过ref完成
                      通过ref获取组件实例对象
                        父获取子：  子组件标签  ref="xxx"
                          this.$refs.xxx=子组件实例对象
                        子获取父  this.$parent=父组件实例对象

                 2：弹框组件显示角色列表
                   a:角色列表的html处理
                   b:获取所有的角色进行渲染
                      导入角色列表api
                      调用获取数据并渲染

                 3：角色可以控制勾选
                 4：角色勾选的显示（把当前帐号所有的角色勾选出来）,数据回显
                    勾选上当前帐号所包含的角色
                    a:如果当前列表数据（帐号数据：当前点击项数据）中包含角色显示传递给弹框组件回显就可以了
                    b:当前帐号数据不包含角色信息，通过调用接口获取数据并渲染
                       b1：定义api获取当前帐号的角色信息
                       b2:导入与调用获取数据并渲染

                 5：修改勾选与提交
                   a:定义修改角色api
                   b:导入修改api
                   c:点击确定调用修改api
               -->
              <el-button type="text" @click="roleClick(row.id)">角色</el-button>
              <!-- <el-button v-if="如果按钮权限数据中包含'employees_delBtn'就显示，不包含就不显示" type="text" @click="del(row.id)">删除</el-button> -->
              <!-- <el-button
                v-if="
                  $store.state.user.userInfo.roles.points.includes(
                    'employees_delBtn'
                  )
                "
                type="text"
                @click="del(row.id)"
              >删除</el-button> -->
              <el-button
                v-btnControl.inlineBlock="'employees_delBtn'"
                type="text"
                @click="del(row.id)"
              >删除</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div class="page">
        <el-pagination
          :current-page="page.page"
          :page-sizes="[1, 5, 10, 100, 200, 300, 400]"
          :page-size="page.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="page.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>
    <!-- 新增弹框 -->
    <!-- <Add :is-show="show" @update:isShow="show = $event" /> -->
    <Add :is-show.sync="show" @getData="getData" />
    <!-- 二维码弹框组件 -->
    <el-dialog :visible.sync="showQrcode" title="头像二维码">
      <div style="text-align: center">
        <canvas ref="canvas" />
      </div>
    </el-dialog>
    <!-- 分配角色弹框 -->
    <SetRole ref="setRole" />
  </div>
</template>
<script>
import { sysUser, sysUserDelete } from '@/api/employees'
import employeesObj from '@/api/constant/employees'
import Add from './components/add.vue'
import moment from 'moment'
import Qrcode from 'qrcode'
import SetRole from './components/setRole.vue'
// import { export_json_to_excel } from '@/vendor/Export2Excel'
export default {
  filters: {
    // formatStr(id) {
    //   // 1:找出id匹配的项
    //   // 返回值=数组.find(item=>{ return boolean值，true,返回值=当前项的item,}如果所有项的都是false，返回值是undefined)
    //   const temp = employeesObj.hireType.find((item) => {
    //     return item.id === id
    //   })
    //   // 2：return 该项的value
    //   return temp ? temp.value : '-'
    // }
  },
  components: {
    Add,
    SetRole
  },
  data() {
    return {
      showQrcode: false, // 头像二维码弹框
      num: 1,
      show: false, // 是否显示新增弹框
      list: [{}],
      page: {
        page: 1,
        size: +window.localStorage.getItem('employeesSize') || 1,
        total: 100
      }
    }
  },
  created() {
    this.getData()
  },
  methods: {
    async getData() {
      const res = await sysUser(this.page)
      // 数据源头进行转换
      res.data.rows.forEach((item) => {
        item.formOfEmployment2 = this.formatterForm(
          null,
          null,
          item.formOfEmployment
        )
        item.enableState2 = this.findState(item.enableState)
        item.timeOfEntry2 = moment(item.timeOfEntry).format('YYYY-MM-DD')
      })
      this.list = res.data.rows

      this.page.total = res.data.total
      console.log('列表数据', res)
    },
    findState(id) {
      const result = employeesObj.workingState.find((item) => {
        return +item.id === id
      })
      return result ? result.value : '-'
    },
    handleSizeChange(size) {
      this.page.size = size
      this.page.page = 1
      this.getData()
      window.localStorage.setItem('employeesSize', size)
    },
    handleCurrentChange(page) {
      this.page.page = page
      this.getData()
    },
    // 聘用 形势转换
    formatterForm(row, column, cellValue, index) {
      // findIndex:  返回值=数组.findIndex(item=>{return Boolean true,返回值当前项的索引}  所有项都是false,返回值是-1)
      const _index = employeesObj.hireType.findIndex((item) => {
        return item.id === cellValue
      })
      return _index === -1 ? '-' : employeesObj.hireType[_index].value
      // return '没找到'
    },
    // 新增点击
    addClick() {
      this.show = true
    },
    // 删除点击
    del(id) {
      this.$confirm('您确定删除该员工吗?', '提示')
        .then(async() => {
          await sysUserDelete(id)
          this.$message.success('删除成功')
          // 刷新列表数据时注意回到第一页
          this.page.page = 1
          this.getData()
        })
        .catch(() => {})
    },
    // 导入点击
    importClick() {
      this.$router.push('/employees/import')
    },
    // 导出点击
    async outputClick() {
      /*
      导出需要做的事情
      1：拿到需要导出的数据(通过调用接口获取)
      2:通过接口获取数据转换成导出需要用到的数据格式
         a：先准备转换规则
           rules:{
           '姓名':'username',
           手机号:'mobile',
           工号:'workNumber',
           聘用形势:'formOfEmployment',
           部门:'departmentName',
           入职时间:'timeOfEntry'
           }
         b:获取主表头  Object.keys(rules)
         c:将调用接口获取的数据转换成相应格式
            先循环列表数据数组，按照需要生成的数据次序生成新数组
      3:调用导出方法
      */
      // export_json_to_excel({
      //   header:主表头,
      //   data:[[依次对应主表头的值，姓名,手机号的值],[...]],
      //   filename:'导出的文件名'
      // })
      const res = await sysUser({
        page: 1,
        size: 9999
      })
      const rules = {
        姓名: 'username',
        手机号: 'mobile',
        工号: 'workNumber',
        聘用形势: 'formOfEmployment',
        部门: 'departmentName',
        入职时间: 'timeOfEntry'
      }
      const header = Object.keys(rules)
      const data = res.data.rows.map((item) => {
        const newArr = []
        // Object.values(rules)===['username','mobile','workNumber','formOfEmployment','departmentName','timeOfEntry']
        Object.values(rules).forEach((item2) => {
          if (item2 === 'timeOfEntry') {
            newArr.push(moment(item[item2]).format('YYYY-MM-DD'))
          } else if (item2 === 'formOfEmployment') {
            newArr.push(this.formatterForm(null, null, item[item2]))
          } else {
            newArr.push(item[item2])
          }
        })
        return newArr
      })
      // 要用到导出时才进行插件该插件，这个xlsx与file-saver插件较大，
      // import导入的东西它返回的是一个promise
      import('@/vendor/Export2Excel.js').then((res) => {
        // res就是导入该插件后它暴露出来的东西
        res.export_json_to_excel({
          header: header,
          data: data,
          filename: '员工列表'
        })
      })

      // console.log('列表数据', res.data.rows)
    },
    // 查看详情点击
    look(id) {
      // this.$router.push('/employees/detail?id=' + id)
      this.$router.push('/employees/detail/' + id)
    },
    // 头像点击打开弹框
    imgClick(imgSrc) {
      // 头像地址不存在时就不渲染
      if (!imgSrc) {
        return
      }
      // 打开弹框:dialog在第一次打开弹框后才开始渲染它内容的内容
      this.showQrcode = true
      // 等到弹框打开后才开始渲染二维码
      this.$nextTick(() => {
        Qrcode.toCanvas(this.$refs.canvas, imgSrc, {
          width: 300,
          height: 300
        })
      })
    },
    // 角色点击
    roleClick(id) {
      // 通过访问子组件实例对象来打开弹框
      this.$refs.setRole.isShow = true
      // 调用方法获取当前点击帐号的角色信息
      this.$refs.setRole.getRoleIds(id)
    }
  }
}
</script>
<style lang="scss" scoped>
.employees {
  padding: 20px;
  ::v-deep .top .el-card__body {
    padding: 5px;
  }
  .top {
    margin-bottom: 20px;
  }
  .page {
    padding-top: 20px;
    text-align: right;
  }
  .avatar {
    width: 30px;
    height: 30px;
    object-fit: contain;
  }
}
</style>
